import {element} from 'protractor';
import {Component, OnInit, Input, ChangeDetectorRef, ViewEncapsulation, ViewChild, ElementRef} from '@angular/core';
import {Router} from '@angular/router';
import {RecommendArticleVO} from "../../../interface";

@Component({
  selector: 'seed-light-box',
  templateUrl: './light-box.component.html',
  styleUrls: ['./light-box.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class LightBoxComponent implements OnInit {
  @Input() list;
  @Input() grid = [];
  index = 0;
  wrapWidth: number;
  showRecommend = false;
  @ViewChild('wrap') wrap: ElementRef;
  scrollContainer;

  constructor(public router: Router,
              public cdRef: ChangeDetectorRef) {
  }

  /**
   * 组图详情header切换
   */
  handleHeader() {
    let lightBox = document.querySelector('.photo-news-header');
    if (lightBox && this.grid.length > 0) {
      if (this.index + 1 > this.list.length) {
        lightBox.classList.add('toogle-header');
      } else {
        lightBox.classList.remove('toogle-header');
      }
    }
  }

  /**
   * 滑动中
   * @param e pan event object
   */
  handlePanmove(e) {
    let distance: number, screenWidth = window.screen.width;
    distance = -(screenWidth * this.index) + e.deltaX;
    this.wrap.nativeElement.style.marginLeft = `${distance}px`;
  }

  /**
   * 滑动后
   * @param e pan event object
   */
  handlePanend(e) {
    const coorX: number = Math.abs(e.deltaX), screenWidth = window.screen.width;

    if (coorX < window.screen.width / 3) { // 滑动距离小于屏幕宽度1/3，还原平移
      this.wrap.nativeElement.style.marginLeft = `${-100 * this.index}%`;
      return;
    }
    if (e.deltaX < 0) { // 左滑
      this.nextSlider(e.deltaX);
    } else { // 右滑
      this.prevSlider(e.deltaX);
    }
  }

  /**
   * 处理双击手势
   * @param e tap event object
   */
  handleTap(e) {
     // 单击
    if (e.tapCount === 1) {
      this.toggleDesc();
      return;
    }
     // 双击
    let element = e.target;
    if (element.getAttribute('style')) {
      element.removeAttribute('style');
      this.wrapWidth = this.list.length * window.screen.width; // 还原 wrap 宽度
      return;
    }
    this.handlePhotoZoom(element, e.center.x);
  }

  /**
   *
   * @param element 所点击的图片
   * @param x 点击位置相对于图片的坐标
   */
  handlePhotoZoom(element, x) {
    let screenWidth = window.screen.width,
      oneThird = screenWidth / 3,
      scale = window.screen.height / element.clientHeight,
      zoomWidth = screenWidth * scale - screenWidth, tx;
     //  this.wrapWidth += screenWidth * scale - screenWidth; // 重新设置 wrap 宽度
    if (0 < x && x < oneThird) {    // 点击图片左边
      tx = zoomWidth / 2;
    } else if (screenWidth > element.clientWidth || oneThird < x && x < oneThird * 2) {   // 图片小于屏幕宽度或者点击图片中间
      element.parentNode.style.width = zoomWidth;
      element.style.webkitTransform = `scale(${scale})`;
      return;
    } else { // 点击图片右边
      tx = -(zoomWidth / 2);
    }

    element.style.webkitTransform = `translate3d(${tx}px, 0px, 0px) scale(${scale})`;
  }

  /**
   * 上一张
   */
  prevSlider(deltaX) {
    if (this.index > 0) {
      let currentSliderIndex = this.index;
      currentSliderIndex -= 1;
      this.slideTo(currentSliderIndex);
    } else {
      this.wrap.nativeElement.style.marginLeft = `${100 * this.index}%`;
    }
  }

  /**
   * 下一张
   */
  nextSlider(deltaX) {
    if (this.index < this.list.length - 1) {
      this.handleWrapWidth();
      let itemCount = this.list.length, slideCount = itemCount,
        currentSliderIndex = this.index;
      if (this.grid.length === 0) { slideCount -= 1; }

      if (this.index < slideCount) {
        currentSliderIndex += 1;
        this.slideTo(currentSliderIndex);
      }
    } else { // 最后一张
      this.wrap.nativeElement.style.marginLeft = `${-100 * this.index}%`;
    }
  }

  /**
   * 滑动至目標滑塊
   * @param index 滑块索引
   */
  slideTo(index: number) {
    this.index = index;
    this.wrap.nativeElement.style.marginLeft = `-${100 * index}%`;
    this.cdRef.detectChanges();
  }

  /**
   * 隐藏图片描述
   */
  toggleDesc() {
    let elements = document.querySelectorAll('.toggle'), i = 0, element;
    while (element = (elements[i++])) {
      element.classList.toggle('fade');
    }
  }

  /**
   * 前往组图详情
   * @param news 推荐的组图
   */
  goToDetail(news: RecommendArticleVO) {
    this.router.navigate(['/photo-news'], {
      queryParams: {
        articleId: news.articleId,
        cateId: news.cateId,
      }
    });
  }

  /**
   * 根据有无推荐组图处理 wrap 宽度
   */
  handleWrapWidth() {
    if (this.grid.length > 0 && !this.showRecommend) {
      this.showRecommend = true;
      this.wrapWidth = (this.list.length + 1) * window.screen.width;
    }
  }

  ngOnInit() {
    this.scrollContainer = document.querySelector('#seed-scroll-content');
    this.wrapWidth = (this.list.length) * window.screen.width;
  }
}
